* Level Bar *
*************/
-$levelbar_size: 12px;
+$levelbar_size: 9px;
$levelbar_border_radius: 3px;
levelbar {
}
}
- &.discrete block {
- min-height: $levelbar_size - 7px;
- margin: 0 1px;
- min-width: 32px;
- border-radius: $levelbar_border_radius;
+ // segmented level bar
+ &.discrete {
+ // trough
+ trough {
+ // border: 1px solid $borders_color;
+ // padding: 1px;
+ // padding-right:0;
+ // background-color: $base_color;
+ // border-radius: 7px;
+ // box-shadow: inset 0 1px 1px 0 rgba(0,0,0,0.05);
+ // &:dir(rtl) {padding-left:0;}
+ // &:dir(ltr) {padding-right:0;}
+ }
+
+ // block
+ block {
+ min-height: 2px;
+ margin: 1px;
+ min-width: 24px;
+ border-radius:0;
+ &:first-child {border-radius: 2px 0 0 2px;}
+ &:last-child {
+ border-radius: 0 2px 2px 0;
+ // margin-right:0;
+ }
+ }
}
}
// level bar colours
block {
border: 1px solid;
+ box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.2);
&.low {
border-color: if($variant == 'light', darken($warning_color, 10%), $borders_color);
background-color: $warning_color;
&:backdrop { border-color:if($variant == 'light', $warning_color, $borders_color); };
-
}
&.high,
progressbar trough.empty progress { all: unset; }
/************* Level Bar * */
-levelbar.horizontal block { min-height: 12px; border-radius: 3px; }
+levelbar.horizontal block { min-height: 9px; border-radius: 3px; }
levelbar.horizontal block:dir(rtl) { border-radius: 0 3px 3px 0; }
levelbar.horizontal block.empty, levelbar.horizontal block.full { border-radius: 3px; }
-levelbar.horizontal.discrete block { min-height: 5px; margin: 0 1px; min-width: 32px; border-radius: 3px; }
+levelbar.horizontal.discrete block { min-height: 2px; margin: 1px; min-width: 24px; border-radius: 0; }
-levelbar.vertical block { min-width: 12px; border-radius: 3px; }
+levelbar.horizontal.discrete block:first-child { border-radius: 2px 0 0 2px; }
-levelbar.vertical.discrete block { min-width: 5px; margin: 1px 0; min-height: 32px; }
+levelbar.horizontal.discrete block:last-child { border-radius: 0 2px 2px 0; }
+
+levelbar.vertical block { min-width: 9px; border-radius: 3px; }
+
+levelbar.vertical.discrete block { min-width: 2px; margin: 1px 0; min-height: 32px; }
levelbar:backdrop { transition: 200ms ease-out; }
levelbar trough { padding: 0; }
-levelbar block { border: 1px solid; }
+levelbar block { border: 1px solid; box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.2); }
levelbar block.low { border-color: #1b1b1b; background-color: #f57900; }
progressbar trough.empty progress { all: unset; }
/************* Level Bar * */
-levelbar.horizontal block { min-height: 12px; border-radius: 3px; }
+levelbar.horizontal block { min-height: 9px; border-radius: 3px; }
levelbar.horizontal block:dir(rtl) { border-radius: 0 3px 3px 0; }
levelbar.horizontal block.empty, levelbar.horizontal block.full { border-radius: 3px; }
-levelbar.horizontal.discrete block { min-height: 5px; margin: 0 1px; min-width: 32px; border-radius: 3px; }
+levelbar.horizontal.discrete block { min-height: 2px; margin: 1px; min-width: 24px; border-radius: 0; }
-levelbar.vertical block { min-width: 12px; border-radius: 3px; }
+levelbar.horizontal.discrete block:first-child { border-radius: 2px 0 0 2px; }
-levelbar.vertical.discrete block { min-width: 5px; margin: 1px 0; min-height: 32px; }
+levelbar.horizontal.discrete block:last-child { border-radius: 0 2px 2px 0; }
+
+levelbar.vertical block { min-width: 9px; border-radius: 3px; }
+
+levelbar.vertical.discrete block { min-width: 2px; margin: 1px 0; min-height: 32px; }
levelbar:backdrop { transition: 200ms ease-out; }
levelbar trough { padding: 0; }
-levelbar block { border: 1px solid; }
+levelbar block { border: 1px solid; box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.2); }
levelbar block.low { border-color: #c26000; background-color: #f57900; }